<template>
	<div class="table-container">
		<!--默认查询-->
		<vab-query-form>
			<el-form ref="formSearch" v-model="search" @submit.native.prevent :inline="inline2" :label-width="null">
				<el-form-item v-if="user.isAdminStore">
					<remoteselect v-model=" search.SysStoreID" url="api/System/SysStoreListSelect"
						value-label="SysStoreName" value-key="SysStoreID" query-key="selectIDName"
						:placeholder="replaceID(keyLan['SysStoreID'])" style="width:150px;">
						<template v-slot="{ row }">
							{{row.SysStoreName}}
						</template>
					</remoteselect>
				</el-form-item>

				<el-form-item>
					<el-select v-model="search.EnumSysCustomerType" clearable style="width:120px;"
						:placeholder="keyLan['EnumSysCustomerType']">
						<el-option v-for="item in EnumSysCustomerType" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-input v-model="search.SysCustomerName__PY" :placeholder="keyLan['SysCustomerName']"
						@keyup.native.enter="getList" style="width:120px">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="search.Phone" :placeholder="keyLan['Phone']" @keyup.native.enter="getList"
						style="width:120px">
					</el-input>
				</el-form-item>

				<el-form-item :label="keyLan['CreateDate']+':'">
					<el-date-picker v-model="search.CreateDate" type="daterange" :placeholder="keyLan['CreateDate']"
						style="width:220px">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-select v-model="search.EnumStatus" clearable style="width:120px;"
						:placeholder="keyLan['EnumStatus']">
						<el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-select v-model="search.HasWechatH5" clearable style="width:120px;" placeholder="绑定微信">
						<el-option v-for="item in HasWechatH5IsYes" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="getList" :loading="loading">
						{{comLan["btnSearch"]}}
					</el-button>
					<slot name="replace">
						<slot name="btnAdd">
							<el-button icon="el-icon-plus" type="primary" @click="btnAdd" v-if="button.新建">
								{{comLan["btnAdd"]}}
							</el-button>
						</slot>
						<slot name="btnExport">
							<el-button icon="el-icon-download" type="primary" @click="btnExport" v-if="button.导出">
								{{comLan["btnExport"]}}
							</el-button>
						</slot>
					</slot>
				</el-form-item>
			</el-form>
		</vab-query-form>

		<!--默认列表-->
		<div>
			<u-table ref="table" v-loading="loading" :data="list" row-key="SysCustomerID" :use-virtual="useVirtual">
				<!-- <slot name="SysStore.EnumSysStoreTypeBefore"></slot>
				<slot name="SysStore.EnumSysStoreType">
					<u-table-column prop="SysStore.EnumSysStoreType" v-if="user.isAdminStore||user.isMainStore"
						:label="comLan['Key']['SysStore']['EnumSysStoreType']" width="80" align="center">
						<template v-slot="scope">
							<span v-html="getLabel(scope.row.SysStore.EnumSysStoreType,EnumSysStoreType)"></span>
						</template>
					</u-table-column>
				</slot>
				<slot name="SysStore.EnumSysStoreTypeAfter"></slot> -->
				<slot name="SysStore.SysStoreNameBefore"></slot>
				<slot name="SysStore.SysStoreName">
					<u-table-column prop="SysStore.SysStoreName" v-if="user.isAdminStore"
						:label="comLan['Key']['SysStore']['SysStoreName']" width="180" align="left"></u-table-column>
				</slot>
				<slot name="SysStore.SysStoreNameAfter"></slot>
				<!-- <slot name="SysStore.PhoneNumberBefore"></slot>
				<slot name="SysStore.PhoneNumber">
					<u-table-column prop="SysStore.PhoneNumber" v-if="user.isAdminStore||user.isMainStore"
						:label="comLan['Key']['SysStore']['PhoneNumber']" width="80" align="left"></u-table-column>
				</slot>
				<slot name="SysStore.PhoneNumberAfter"></slot>
				<slot name="SysStore.EnumStatusBefore"></slot>
				<slot name="SysStore.EnumStatus">
					<u-table-column prop="SysStore.EnumStatus" v-if="user.isAdminStore||user.isMainStore"
						:label="comLan['Key']['SysStore']['EnumStatus']" width="50" align="center">
						<template v-slot="scope">
							<span v-html="getLabel(scope.row.SysStore.EnumStatus,EnumStatus)"></span>
						</template>
					</u-table-column>
				</slot>
				<slot name="SysStore.EnumStatusAfter"></slot> -->

				<u-table-column prop="EnumSysCustomerType" :label="keyLan['EnumSysCustomerType']" width="100"
					align="center">
					<template v-slot="scope">
						<span v-html="getLabel(scope.row.EnumSysCustomerType,EnumSysCustomerType)"></span>
					</template>
				</u-table-column>

				<u-table-column prop="SysCustomerName" :label="keyLan['SysCustomerName']" width="120" align="left">
				</u-table-column>

				<u-table-column prop="Phone" :label="keyLan['Phone']" width="150" align="left">
				</u-table-column>

				<u-table-column prop="CreateDate" :label="keyLan['CreateDate']" width="160" align="center">
					<template v-slot="scope">
						<span v-if="!!scope.row.CreateDate">{{scope.row.CreateDate | datetime}}</span>
					</template>
				</u-table-column>
				<u-table-column prop="EnumStatus" :label="keyLan['EnumStatus']" width="50" align="center">
					<template v-slot="scope">
						<span v-html="getLabel(scope.row.EnumStatus,EnumStatus)"></span>
					</template>
				</u-table-column>

				<u-table-column prop="WechatH5" label="绑定微信" width="80" align="center">
					<template v-slot="scope">
						<span
							v-html="getLabel(scope.row.WechatH5!=null&&scope.row.WechatH5.length>0,HasWechatH5IsYes)"></span>
					</template>
				</u-table-column>

				<u-table-column prop="Remark" :label="keyLan['Remark']" width="" align="left"></u-table-column>

				<u-table-column2 v-if="showOp">
					<template v-slot="scope">
						<slot name="replace" :row='scope.row' :$index='scope.$index' :column="scope.column"
							:store="scope.store" :_self="scope._self">
							<slot name="btnEdit" :row='scope.row' :$index='scope.$index' :column="scope.column"
								:store="scope.store" :_self="scope._self">
								<el-button type="text" @click="btnEdit(scope)" v-if="button.编辑">
									{{comLan["btnEdit"]}}
								</el-button>
							</slot>
							<slot name="btnEnumStatus" :row='scope.row' :$index='scope.$index' :column="scope.column"
								:store="scope.store" :_self="scope._self">
								<el-button type="text" @click="btnEnumStatus(scope,scope.row.EnumStatus==0?1:0)"
									v-if="button.启用禁用">
									{{scope.row.EnumStatus==0 ? comLan["btnEnable"] : comLan["btnDisable"]}}
								</el-button>
							</slot>
							<slot name="btnDel" :row='scope.row' :$index='scope.$index' :column="scope.column"
								:store="scope.store" :_self="scope._self">
								<el-button type="text" @click="btnDel(scope)" v-if="button.删除">
									{{comLan["btnDel"]}}
								</el-button>
							</slot>
							<slot :row='scope.row' :$index='scope.$index' :column="scope.column" :store="scope.store"
								:_self="scope._self"></slot>
						</slot>
					</template>
				</u-table-column2>
			</u-table>
			<el-pagination v-if="showPage" :current-page="search.index" :page-size="search.size" :total="total"
				@current-change="indexChange" @size-change="sizeChange"></el-pagination>
		</div>

		<!--默认新建编辑-->
		<exAddEdit ref="exAddEdit" @success="getList"></exAddEdit>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import js from "./js.js";
	import exAddEdit from "./SysCustomerAdd";

	export default {
		name: "SysCustomerList",
		mixins: [common.baseVM, js],
		components: {
			exAddEdit
		},
		data() {
			return {
				button: {
					查询: false,
					新建: false,
					编辑: false,
					启用禁用: false,
					删除: false,
					导出: false
				},
				search: {
					SysStoreID: null,
					EnumSysCustomerType: null,
					SysCustomerName__PY: null,
					Phone: null,
					CreateDate: [],
					EnumStatus: 1,

					HasWechatH5: null
				},
				isRedict: false
			};
		},
		methods: {
			selectionChange(val) {
				//console.log("selectionChange", val);
			},
			init() {
				this.loadDefaultSearch(() => {
					this.getList();
				});
			},
			btnAdd() {
				if (this.isRedict) {
					// 跳转链接
					var url = "/Customer/SysCustomerAddRedict";
					this.navigateToRefresh(url);
				} else {
					this.$refs["exAddEdit"].show();
				}
			},
			btnEdit(scope) {
				if (this.isRedict) {
					// 跳转链接
					var url = "/Customer/SysCustomerAddRedict";
					this.navigateToRefresh(url, {
						id: scope.row.SysCustomerID
					});
				} else {
					this.$refs["exAddEdit"].show(scope);
				}
			},
			btnEnumStatus(scope, status) {
				var id = scope.row.SysCustomerID;
				var name = scope.row.SysCustomerName;
				var str = status == 1 ? this.comLan["btnEnable"] : this.fscomLan["btnDisable"];
				var msg = this.stringFormat(this.comLan.js["updateEnumStatus"], name, str);
				this.confirm(msg, () => {
					this.post("api/Customer/SysCustomerUpdateEnumStatus", this.toKeyValue({
						id: id,
						status: status
					})).then(data => {
						this.getList();
					}).catch(error => {});
				});
			},
			btnDel(scope) {
				var id = scope.row.SysCustomerID;
				var name = scope.row.SysCustomerName;
				var msg = this.stringFormat(this.comLan.js["delete"], name);
				this.confirm(msg, () => {
					this.post("api/Customer/SysCustomerDel", this.toKeyValue({
						id: id
					})).then(data => {
						this.getList();
					}).catch(error => {});
				});
			},
			getList() {
				this.getListByUrl('api/Customer/SysCustomerList');
			},
			btnExport() {
				this.$refs.exTable.exportFile(this.keyLan["name"]);
			}
		}
	};
</script>
